<template>
  <div class="common-layout">
    <el-container style="height: 100vh">
      <el-aside width="200px">
        <el-menu
            style="height: 100%"
            class="el-menu-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :default-active="$route.path"
            router
        >
          <el-menu-item  v-for="(item,i) in navList" :key="i" :index="item.name">{{ item.navItem }}</el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      navList: [
        { name: "/", navItem: "首页" },
      ]
    }
  },
}
</script>

<style scoped>
::v-deep(.el-main){
  padding: 0;
}
</style>
